<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <script>



    </script>
</head>

<body>
    <table width="600" border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>价格</th>
                <th>类别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">
            <!-- <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.price}</td>
                <td>${item.typeid}</td>
                <td>
                    <input type="button" value="删除">
                </td>
            </tr> -->
        </tbody>
    </table>
</body>


<script>





    // 先请求到数据
    const xhr = new XMLHttpRequest();
    xhr.open('get', '../data.json', true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            let data = this.responseText;
            data = JSON.parse(data);
            // console.log(data);
            render(data);

        }
    }


    function render(data) {
        let html = '';
        data.forEach(item => {
            html += `
            <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.price}</td>
                <td>${item.typeid}</td>
                <td>
                    <input type="button" value="删除">
                </td>
            </tr>
            `
        })

        document.querySelector('#list').innerHTML = html;
    }


</script>

</html>